<template>
  <a-layout-header class="header">
    <div class="left">
      <a-tabs :activeKey="activeKey">
        <a-tab-pane key="start" tab="开始">
          <StartContent />
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="center">{{ title }}</div>
    <a-space wrap class="right">
      <a-button @click="handlePreview">预览</a-button>
      <a-button type="primary" @click="handleSave"> 保存</a-button>
    </a-space>
    <div class="right"></div>
  </a-layout-header>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useFormStore } from "@/form/design-mode/store/formStore";
import { saveFormData } from "@/mockData/form";
import StartContent from "./Start.vue";
const activeKey = ref("start");
const router = useRouter();
const formStore = useFormStore();
const { title } = storeToRefs(formStore);
const handleSave = () => {
  const data = formStore.getData();
  saveFormData(data);
};
const handlePreview = () => {
  router.push({ path: "/form/view" });
};
</script>

<style scoped>
.header {
  background-color: #fff;
  display: flex;
  height: auto;
}
.left {
}
.center {
  flex: auto;
  display: flex;
  justify-content: center;
}
</style>
